<template>
  <div ref="content"><slot></slot></div>
</template>

<script>
import AbstractEntity from '../entity/Abstract.vue'

export default {
  name: 'ShaderContent',
  mixins: [AbstractEntity],

  inject: {
    ShaderName: {
      default: null,
    },
  },

  props: {
    // eslint-disable-next-line vue/require-default-prop
    name: {
      type: String,
      validator() {
        return (value) => value || this.ShaderName
      },
    },

    content: {
      type: String,
      default: null,
    },
  },

  data() {
    return {
      text: null,
    }
  },

  computed: {
    uid() {
      return this.name || this.ShaderName
    },

    value() {
      return this.content || this.text
    },

    shader() {
      return {
        name: this.uid,
        value: this.value,
      }
    },
  },

  watch: {
    shader() {
      this.setStore()
    },
  },

  mounted() {
    this.text = this.$refs.content.textContent
    this.setStore()
  },
}
</script>
